<template>
	<view class="content">
		<view class="cont1">
			<view class="cont1_1">
				配送信息
			</view>
			<view class="cont1_2" @click="open">
				完善收货信息
			</view>
			<!-- <view class="btn2">
				<button @click="showAddress">有地址</button>
				<button  @click="open">没有地址</button>
			</view> -->
			<view class="address" v-show="isAddress">
				<span>收货地址: </span>
				<span style="padding: 0rpx 20rpx;font-size: 24rpx;color:darkgrey"> {{formAddress.name}}  {{formAddress.phone}}</span>
				<view style="padding: 30rpx 150rpx;font-size: 24rpx;color:darkgrey">
					{{formAddress.address}}
				</view>
			</view>
			<view >
				
				<uni-popup ref="popup" type="bottom" background-color="#fff"  :mask-click="false">
					<view class="popup-content">
						<view class="uni-form-item uni-column">
							<view class="title">收货人:</view>
							<input class="uni-input" focus  v-model="formAddress.name"/>
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">电话:</view>
							<input class="uni-input" focus  v-model="formAddress.phone" />
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">收货地址:</view>
							<input class="uni-input" focus  v-model="formAddress.address"/>
						</view>
						<view class="ensure">
							<button @click="cancel" class="mybtn">取消</button>
							<button @click="close" class="mybtn">确认</button>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
		<view class="cont2">
			<view>
				商品信息
			</view>
			<view class="cont3">
				<image class="t1" :src="goods.src"></image>
				<view class="t2">
					<text>{{goods.goodsName}}</text>
					<view class="jifen">
						<span class="span2"> {{goods.jifen}}积分</span>
						<span >规格: {{goods.size}}</span>
						<span class="span3"> x {{goods.number}}</span> 
					</view>
				</view>
			</view>
		
		</view>
		<view class="foot">
			<text>支付方式</text>
			<view>
				积分支付 <span class="span2" > {{total}} </span> 积分
			</view>
<!-- 			<view class="discount">
				折扣：<span class="span2" >{{goods.discount}}</span> 折
			</view> -->
		</view>
		<view class="btn">
			<view>
				实际支付：<span class="span2"> {{total}} </span> 积分
			</view>
			<button @click="pay">
				立即支付
			</button>
		</view>
		<view>
			<uni-popup ref="popupPay" type="bottom" background-color="#fff" :mask-click="false">
				<view class="popup-content">
					<view class="uni-form-item uni-column">
						<view class="title">请输入密码 : </view>
						<input class="uni-input" focus  v-model="password" type="password"/>
					</view>
					<view class="ensure">
						<button @click="cancelPay" class="mybtn">取消</button>
						<button @click="orderPay" class="mybtn">确认</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		// 接收上个页面传递过来的参数
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
				console.log(JSON.parse(decodeURIComponent(option.goods)))
			const item = JSON.parse(decodeURIComponent(option.goods)); //打印出上个页面传递的参数。
				this.goods.src = item.image
				this.goods.goodsName = item.name
				this.goods.jifen = item.price
				this.goods.id = item.id
				this.goods.number = item.count 
				this.goods.size = item.value
				this.goods.price = item.price / 10
				// if(JSON.stringify(option) === '{}'){
				// 	console.log('123')
				// }else{
				// 	this.order.id = option.id
				// 	this.getOrder()
				// }
			},
		data() {
			return {
				updatejf:0,
				userJifen:0,
				order:{
					id:'',
					//订单创建时间
					orderTime:'',
					//订单编号
					order_id:'',
					//付款时间
					payTime:'',
					price:''
				},
				isShow:false,
				//展示收货信息
				isAddress:false,
				//收货信息表单
				formAddress:{
					address:'',
					name:'',
					phone:'',
					state:''
				},
				// 用户名，支付密码
				userName:'',
				payPwd:'',
				password:'',
				// 有收货地址的表单
				// form1:{
				// 	address:'成都市武侯区',
				// 	name:'张三',
				// 	phone:'123456789',
				// 	state:''
				// },
				// 商品信息数据
				goods:{
					id:'',
					src:'',
					goodsName:'',
					jifen:'',
					number:'',
					totalJifen:'',
					size:'',
					price:0
				}
			}
		},
		created(){
			this.getUser()
		},
		computed:{
		total:function(){
			return this.goods.jifen * this.goods.number
		},
		},
		methods: {
			// 根据username查询积分
			getJifen(){
				console.log(this.userName,'用户积分')
				uni.request({
						url:'http://localhost:3001/selectJf',
						data:{
							userName:this.userName
						},
						method:'post',
						success:(res)=>{
							console.log(res.data)
							this.userJifen = res.data.data[0].jiFen
							console.log(this.userJifen,'登录用户积分')
						}
				})
			},
			getUser(){
				// console.log(this.userName)
				uni.getStorage({
					key: 'userInfo',
					success: (res)=>{
						console.log(res,'当前用户登录');
						 this.userName=res.data
						 // console.log(this.userName)
						 this.getJifen()
						 this.getPwd()
						 
					}
				})
			},
			// 支付成功修改当前用户积分
			updateJifen(){
				// console.log(this.total,'z总积分',this.userJifen)
				this.updatejf = this.userJifen - this.total
				console.log(this.updatejf,'修改积分')
				uni.request({
						url:'http://localhost:3001/modifyJf',
						data:{
							userName:this.userName,
							jiFen:this.updatejf
						},
						method:'post',
						success:(res)=>{
						console.log(res.data)
						}
				})
			},
			
			// 获取订单创建时间 获取当前标准时间，转为：YYYY-MM-DD h:m:s (年月日 时分秒) 格式
			getCurrentTime () {
			     let date = new Date()
			     let Y = date.getFullYear()
			     let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
			     let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
			     let hours = date.getHours()
			     let minutes = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
			     let seconds = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
			     date = Y + '-' + M + '-' + D + ' ' + hours + ':' + minutes + ':' + seconds
					this.order.orderTime = date
					return this.order.orderTime
			   },
			   // 获取付款时间
				   getPayTime () {
				        let date = new Date()
				        let Y = date.getFullYear()
				        let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
				        let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
				        let hours = date.getHours()
				        let minutes = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
				        let seconds = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
				        date = Y + '-' + M + '-' + D + ' ' + hours + ':' + minutes + ':' + seconds
				   		this.order.payTime = date
				   		return this.order.payTime
				      },
				//没有收货地址时打开弹框填写收货地址
			      open(){
			        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			        this.$refs.popup.open('top')
						this.isAddress = false
			      },
				 // 关闭弹窗
				  close() {
				  			this.$refs.popup.close()
							// this.form1 = this.form
							this.isAddress = true
				  		},
				// 有地址时展示收货地址
			// 展示收货信息
			showAddress(){
				this.isAddress = true
			},
			 // 点击取消关闭弹框
			cancel(){
				this.$refs.popup.close()
				this.isAddress = true
			},
			
			// 验证密码是否正确
			getPwd(){
				// console.log(this.password,this.userName,'270Hang')
				uni.request({
						url:'http://localhost:3001/seachPwd',
						data:{
							userName:this.userName,
						},
						method:'post',
						success:(res)=>{
							// console.log(this.userName,res)
							this.payPwd = res.data.data[0].payPwd
							// console.log(this.payPwd,'密码')
						}
				})
			},
			// 点击支付按钮
			pay(){
				this.getJifen()
				// console.log(this.form1)
				// 判断收货信息是否为空
				if(this.formAddress.name==""||this.formAddress.phone==""||this.formAddress.address==""||this.isAddress==false){
					wx.showModal({
					  title: '提示',
					  content: '请完善收货信息',
					  success (res) {
					    if (res.confirm) {
					      // console.log('用户点击确定')
					    } else if (res.cancel) {
					      // console.log('用户点击取消')
					    }
					  }
					})
				}else{
				// 调用获取当前时间方法，获取订单创建时间 拿到date
					this.getCurrentTime()
					// console.log(this.order.orderTime,'点击支付生成订单创建时间')
					// 生成订单编号
					this.order.order_id = 'JF' + Date.parse(new Date())
						// console.log(this.order.order_id,'点击支付生成订单编号')
						// 打开支付密码窗口
						this.$refs.popupPay.open('center')
						}
			},
			
			// 取消支付关闭支付密码窗口
			cancelPay(){
				// 生成待付款订单信息
				 this.$refs.popupPay.close()
				// 订单状态待付款
				this.formAddress.state = 1   //1代表订单状态为待付款
				this.goods.totalJifen = this.total
				let orderFormCancel = {
						userName:this.userName,
						order_id:this.order.order_id,
						order_jf:this.goods.totalJifen,
						status:this.formAddress.state,
						create_time:this.order.orderTime,
						paytime:'待付款',
						user:this.formAddress.name,
						address:this.formAddress.address,
						phone:this.formAddress.phone,
						goods_id:this.goods.id,
						goods_imgs:this.goods.src,
						goods_jf:this.goods.jifen,
						goods_name:this.goods.goodsName,
						goods_num:this.goods.number,
						goods_size:this.goods.size,
						goods_color:this.goods.size,
						paytype:'待支付',
						order_jf:this.goods.totalJifen,
						goods_price:this.goods.price,
						order_price:0,
						 modify_time:'',
						ps_price:0,
						order_price:0,
						distr_time:'待发货',
						company:'',
						distr_num:''
				}
				// 发起请求，将订单编号，订单状态，收货信息，订单创建时间以及商品信息发送给后端
				uni.request({
						url:'http://localhost:3001/addOrder',
						data:
							orderFormCancel
						,
						method:'post',
						success:(res)=>{
							console.log(res.data)
						
						}
				})
				//console.log(orderFormCancel,'取消支付时传给后端的数据')
				this.password = '' 
				uni.switchTab({
					url: '/pages/orderList/orderList'
				});
			},
			// 确认支付
			orderPay(){
				// this.getJifen()
				if(this.userJifen - this.total >=0){
					if(this.password == this.payPwd){
						// 生成待发货订单信息，订单编号，订单状态，付款时间
						this.formAddress.state = 2
						this.goods.totalJifen = this.total
						// 拿到付款时间
						this.getPayTime()
						//console.log(this.order,this.formAddress,this.goods,'支付成功后传给后端的数据')
						let orderForm = {
							userName:this.userName,
							order_id:this.order.order_id,
							order_jf:this.goods.totalJifen,
							status:this.formAddress.state,
							create_time:this.order.orderTime,
							paytime:this.order.payTime,
							user:this.formAddress.name,
							address:this.formAddress.address,
							phone:this.formAddress.phone,
							goods_id:this.goods.id,
							goods_imgs:this.goods.src,
							goods_jf:this.goods.jifen,
							goods_name:this.goods.goodsName,
							goods_num:this.goods.number,
							goods_size:this.goods.size,
							goods_color:this.goods.size,
							paytype:'积分支付',
							order_jf:this.goods.totalJifen,
							goods_price:this.goods.price,
							order_price:0,
							modify_time:'',
							ps_price:0,
							order_price:0,
							distr_time:'待发货',
							company:'',
							distr_num:''
						}
					// 发起请求，将订单编号，订单状态，收货信息，订单创建时间，付款时间，以及商品信息发送给后端
					uni.request({
						url:'http://localhost:3001/addOrder',
						data:orderForm,
						method:'post',
								success:(res)=>{
									this.updateJifen()
								}
					})
						wx.showModal({
						  content: '支付成功',
						  success: (res)=>{
						    if (res.confirm) {
							  uni.switchTab({
							  	url:'/pages/orderList/orderList'
							  })
						    } else if (res.cancel) {
						    }
						  }
						})
					}else{
					wx.showToast({
					  title: '密码错误',
					  icon: 'error',
					  duration: 1000
					})
					}
				
					this.password ='' 
					// 跳转到订单列表页面
				// uni.switchTab({
				// 	url: '/pages/orderList/orderList'
				// });
					
					// 积分不足
				} else{
					wx.showToast({
					  title: '积分不足',
					  icon: 'error',
					  duration: 1000
					})
				}
				this.password = ''
				 this.$refs.popupPay.close()
			}
		
		}
	}
</script>

<style scoped lang="less">
	.content{
		width: 750rpx;
		height: 800rpx;
		padding: 20rpx 0rpx;
		background-color:rgb(247,246,246);
		box-sizing: border-box;
	}
	.cont1{
		width: 680rpx;
		height: 300rpx;
		background: white;
		margin: 30rpx auto;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		.cont1_2{
			text-align: center;
			font-size: 28rpx;
		}
	}
	uni-popup{
		height: 300rpx;
		border-radius: 10rpx;
	}
	.ensure{
		display: flex;
		justify-content: space-around;
	}
	.mybtn{
		margin: 10rpx 0rpx;
		height: 60rpx;
		line-height: 60rpx;
		width: 150rpx;
		background-color: orangered;
		color: white;
		font-size: 26rpx;
		border-radius: 10rpx;
	}
	.uni-common-mt{
		margin: 40rpx 0rpx;
		box-sizing: border-box;
	}
	.popup-content{
		width: 680rpx;
		
	}
	.address{
		font-size:26rpx;
		padding: 20rpx 20rpx;
		margin: 0rpx auto;
		view{
		padding: 20rpx 0rpx;
		}
	}
	input{
		border:1px #e5e5e5 solid;
		width: 350rpx;
	}
	.uni-form-item{
		display: flex;
		justify-content: space-around;
		margin: 20rpx auto;
	}
	.title{
		font-size:24rpx;
	}
	.cont2{
		width: 680rpx;
		height: 250rpx;
		margin: 20rpx auto;
		background: white;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
	}
.cont3{
		padding: 20rpx 20rpx;
		display: flex;
		height:100rpx;
		box-sizing: border-box;
		view{
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			color: grey;
			line-height: 40rpx;
		}
	}
	image{
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}
	.t1{
		width: 200rpx;
		height: 100rpx;
		color: black;
		font-size: 24rpx;
	}
	.span2{
		color: orangered;
	}
	.span3{
		padding-left: 300rpx;
		
	}
	.foot{
		width: 680rpx;
		margin: 50rpx auto;
		padding: 20rpx 20rpx;
		width: 680rpx;
		line-height: 70rpx;
		display: flex;
		flex-direction: column;
		background-color: white;
		box-sizing: border-box;
		view{
			font-size: 28rpx;
		}
		span{
			color: black;
			font-size: 28rpx;
		}
		
	}
	.jifen{
		display: flex;
		justify-content: space-between;
	}
	
	.span4{
			font-size: 28rpx;
			color: red;
		}
	.btn{
		padding-left:40rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 500rpx;
		margin-bottom: 50rpx;
		display: flex;
		justify-content: space-evenly;
		box-sizing: border-box;
		button{
			height: 60rpx;
			line-height: 60rpx;
			background: red;
			color: white;
		}
	}
	.btn2 button{
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		margin: 10rpx auto;
	}
</style>
